<!--
 * @Author: coocase
 * @Date: 2021-03-12 09:38:38
 * @LastEditTime: 2021-06-21 17:40:59
 * @LastEditors: coocase
 * @Description: 微信支付
 * @FilePath: \git\dami\src\pages\pay\qrPay.vue
-->
<template>
<div>
    <Steps :current="3">
            <Step title="选择商品"></Step>
            <Step title="确认订单信息"></Step>
            <Step title="支付订单"></Step>
            <Step title="收取商品"></Step>
        </Steps>
    <div class="wrap">
        <div class="QR-wrap">
            <div class="QR-title">订单将在两小时后关闭，请及时付款</div>
            <div class="QR">
                <svg class="icon icon-qr" aria-hidden="true">
                    <use xlink:href="#icon-qr1154761easyiconnet"></use>
                </svg>
            </div>
            <div class="QR-tip">请使用扫一扫完成支付</div>
            <div class="btn-wrap">
            <Button class="btn" type="primary" :to="{ name: 'success' }">支付完成</Button>
            <!-- <Button type="primary">支付失败</Button> -->
    </div>
        </div>
        <div class="info">
            <div class="info-title">订单详情</div>
            <div class="info-id">支付订单号:215552422220000330</div>
            <div class="info-name">商品名称:{{buydatas.itemName}}</div>
            <div class="price">订单金额: ￥<span>{{totalPrice()}}</span></div>
        </div>
        
        
    </div>
    
</div>
    
</template>

<script>
import bus from "../../common/eventBus";
export default {
    name: "qrPay",
    data() {
        return {
            buydatas: "",
            selected: "",
             form: {
                user: "",
                phone: "",
            },
        };
    },
    computed:{
        getprice(){
            var arr =[];
            if(this.buydatas.itemPrice){//不做判断的话，数据不存在时则会报错 foreach 未定义
                this.buydatas.itemPrice.forEach(el => {
                    arr.push(el.price)
                });
            }
            for (let i = 0; i < arr.length-1; i++) {
                for (let j = 0; j < arr.length-1-i; j++) {
                    if(arr[j]>arr[j+1]){
                        let el = arr[j+1];
                        arr[j+1] = arr[j];
                        arr[j] = el;
                    }
                }
            }
            return arr
        }
    },
    methods:{
        //根据等级返回价格
        price: function (level) {
            var price = 0;
            switch (level) {
                case 3:
                    price = this.getprice[3];
                    break;
                case 4:
                    price = this.getprice[2];
                    break;
                case 5:
                    price = this.getprice[1];
                    break;
                default:
                    price = this.getprice[0];
                    break;
            }
            return price;
        },
        totalPrice(){
            var total = 0;
            for (let i = 0; i < this.selected.length; i++) {
                const element = this.selected[i];
                total = total + this.price(this.selected[i][2])
                
            }
            return total
        }
    },
    created: function () {
        bus.$off("paydatas").$on("paydatas", (paydatas, selected,form) => {
            this.buydatas = paydatas;
            this.selected = selected;
            this.form = form;
            console.log(this.form);
        });
    },
    beforeDestroy(){
        // var money = 
        bus.$emit('paydatas', this.totalPrice(),this.form)
    },
};
</script>

<style  scoped>
.wrap{
    width: 1200px;
    margin: 20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* .btn-wrap .btn{
   margin: 30px; 
} */
.icon-qr {
    background-color: #fff;
    font-size: 150px;
    color: rgb(0, 0, 0);
}
.QR-wrap{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 300px;
    margin-right: 100px;
}
.QR-wrap .QR-title,.QR-tip{
    font-size: 12px;
}
.info{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    
}
.info-title,.info-id,.info-name,.price{
    margin: 10px;
    font-weight: bold;
}
.price span{
    color: #ff1268;
}
</style>

